<template>
  <div class="mapbj cursor">
    <img src="@/assets/img/home/taishun.png" usemap="#Map" border="0" style="width: 36.0625rem; height: 32.25rem;" />
    <map name="Map" id="Map">
      <!-- 竹里畲族乡 -->
      <div class="zhuli map_icon" @click="switchMaptwo(1, '竹里畲族乡','330329204000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area shape="poly" coords="130,126,158,111,175,88,169,63,150,50,120,54,111,72,110,100,114,112" />
      </div>

      <!-- 司前畲族镇 -->
      <div class="siqian map_icon" @click="switchMaptwo(2, '司前畲族镇','330329101000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area shape="poly" coords="37,96,27,118,84,135,114,137,137,163,142,198,161,208,150,190,156,163,165,154,235,127,235,90,198,58,194,22,167,7,109,25,107,40" />
      </div>
      <!-- 罗阳镇 -->
      <div class="luoyang map_icon" @click="switchMaptwo(3, '罗阳镇',' 330329100000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area
          shape="poly"
          coords="25,122,26,180,8,197,20,222,58,234,37,266,39,280,69,278,80,300,69,368,62,377,114,434,139,413,156,374,172,355,229,326,242,300,225,279,197,278,179,279,174,236,168,221,145,213,143,200,135,169,119,149,106,142"
        />
      </div>
      <!-- 百丈镇 -->
      <div class="baizhang map_icon" @click="switchMaptwo(4, '百丈镇','330329102000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area shape="poly" coords="155,195,173,222,207,233,241,219,282,180,323,157,344,127,328,118,297,123,258,135,237,130,179,153,158,168" />
      </div>
      <!-- 筱村镇 -->
      <div class="xiaocun map_icon" @click="switchMaptwo(5, '筱村镇','330329103000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area
          shape="poly"
          coords="328,164,378,244,336,272,287,283,280,301,303,330,304,353,281,403,258,404,119,459,115,437,139,419,168,371,245,319,248,297,229,271,206,273,183,265,176,230,203,240,243,226,278,191"
        />
      </div>
      <!--龟湖镇  -->
      <div class="guihu map_icon" @click="switchMaptwo(6, '龟湖镇','330329112000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area shape="poly" coords="126,468,142,499,217,508,331,440,331,432,279,410,263,406,196,429" />
      </div>
      <!-- 泗溪镇 -->
      <div class="sixi map_icon" @click="switchMaptwo(7, '泗溪镇','330329104000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area
          shape="poly"
          coords="290,406,332,425,324,380,332,369,373,377,382,351,406,329,438,325,446,329,459,308,471,299,449,283,385,250,345,272,305,285,291,298,309,325,312,359"
        />
      </div>
      <!-- 雅阳镇 -->
      <div class="yayang map_icon" @click="switchMaptwo(8, '雅阳镇','330329106000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area shape="poly" coords="339,441,359,444,391,479,440,439,430,415,437,383,445,336,437,330,413,331,387,353,376,382,335,378,328,394" />
      </div>
      <!-- 彭溪镇 -->
      <div class="pengxi map_icon" @click="switchMaptwo(9, '彭溪镇','330329105000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area shape="poly" coords="442,435,498,394,539,396,571,372,519,339,472,301,444,331,437,400,433,420" />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapTaiShun',

  data () {
    return {
      qxname: '泰顺县',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330329000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName)
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapbj {
  position: absolute;
  top: 14.5%;
  left: 30%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}

.zhuli {
  position: absolute;
  top: -2%;
  left: 15%;
}
.siqian {
  position: absolute;
  top: 2%;
  left: 2%;
}
.luoyang {
  position: absolute;
  top: 27%;
  left: 7%;
}
.baizhang {
  position: absolute;
  top: 13%;
  left: 34%;
}
.xiaocun {
  position: absolute;
  top: 39%;
  left: 37%;
}
.guihu {
  position: absolute;
  top: 69%;
  left: 31%;
}
.sixi {
  position: absolute;
  top: 39%;
  left: 60%;
}
.yayang {
  position: absolute;
  top: 64%;
  left: 56%;
}
.pengxi {
  position: absolute;
  top: 52%;
  left: 76%;
}
</style>
